import React, { Component } from "react";
// antd
import { Button } from "antd";
import Action from "@c/buttonAction/Index";
// table 组件
import TableComponent from "@c/tableData/Index";
import RobotgroupModal from "./components/GroupModal";
import SendMsgModal from "./components/SendMsgModal";


class NotifyGroupList extends Component {
    constructor(props){
        super(props);
        this.state = {
            // id
            id: "",
            // flag
            flag: false,
            // 请求参数
            PageNumber: 1,
            PageSize: 10,
            keyWork: "",
            // 表头
            tableConfig: {
                url: "notify_groupList",
                method: "get",
                checkbox: true,
                thead: [
                    { title: "钉钉群", dataIndex: "group_title", key: "group_title" },
                    { title: "机器人Token", dataIndex: "robot_token", key: "robot_token" },
                    { title: "所属部门", dataIndex: "department", key: "department" },
                    { title: "其他", dataIndex: "remark", key: "remark" },
                    { 
                        title: "操作", 
                        dataIndex: "operation", 
                        key: "operation", 
                        width: 215,
                        render: (text, rowData) => {
                            return (
                                <div className="inline-button">
                                    <Action>
                                        <Action.Button onClick={() => this.notifygroupModal({status: true, notify_group_id: rowData.id})}>编辑</Action.Button>
                                        <Action.Button onClick={() => this.delete(rowData.id)}>删除</Action.Button>
                                    </Action>
                                </div>
                            )
                        }
                    }
                ],
                formItem: [
                    { 
                        type: "Input",
                        label: "群名称", 
                        name: "group_title__contains", 
                        placeholder: "请输入群名称"
                    },
                    { 
                        type: "Input",
                        label: "机器人Token", 
                        name: "robot_token__contains", 
                        placeholder: "请输入机器人Token"
                    }
                ],
                formSearchCol: 18,
                formRightCol: 6,
            },
            // 表的数据
            data: []
        };
    }
    /** 生命周期挂载完成 */
    componentDidMount(){}

    // 获取子组件实例
    getChildRef = (ref) => { this.tableComponent = ref;} // 存储子组件
    // 获取弹窗子组件实例
    getNotifygroupModalRef = (ref) => { this.child = ref }
    // 获取弹窗子组件实例（发送消息）
    getSendmsgModalRef = (ref) => { this.child2 = ref }

    // 显示弹窗1
    notifygroupModal = (data) => {
        console.log(data)
        this.child.visibleModal(data);
    }
    // 显示弹窗2
    sendmsgModal = (data) => {
        console.log(data)
        this.child2.visibleModal(data);
    }
    /** 删除 */
    delete = (id) => {
        this.tableComponent.onHandlerDelete(id)
    }
    
    render(){
        return (
            <div>
                <TableComponent onRef={this.getChildRef} batchButton={true} config={this.state.tableConfig}>
                    <Button type="primary" ref="notify_groupAdd" onClick={() => this.sendmsgModal({ status: true })}>发送消息</Button>
                    <Button type="primary" ref="notify_groupAdd" onClick={() => this.notifygroupModal({ status: true })}>添加</Button>
                </TableComponent>
                <RobotgroupModal onRef={this.getNotifygroupModalRef} />
                <SendMsgModal onRef={this.getSendmsgModalRef} />
            </div>
        )
    }
}
export default NotifyGroupList;